<!--Quiz-->
<div class="modal fade bs-kerjakan-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
	<form action="<?php echo base_url(); ?>user/selesai" method="post" name="form_test" id="form_test">
		
		<input name="user" type="hidden" value="<?php echo$this->session->userdata('username'); ?>">
		<input name="test" type="hidden" value="<?php echo$test_id; ?>">
		
      <div class="modal-header">
		<div class="timer close">
			<b>Timer <span class="hour" id="hour">00</span>:<span class="minute" id="minute">00</span>:<span class="second" id="second">00</span></b>
		</div>
		<h4 class="modal-title" id="myModalLabel">Selamat Mengerjakan.</h4>
      </div>
      <div class=".modal-body">
	  
	  <div class="bs-docs-header" id="content">
			<div id="carousel-test-generic" class="carousel slide" data-ride="carousel" data-interval="false">
				  <div class="carousel-inner" style="padding-left:3%; width:97%">
					<?php 
					$i = 0;
					foreach($soal as $data){
					?>
					<div class="item <?php if($i==0){echo"active";} ?>" style="height:250px; overflow:auto;">
						<h3><b><?php echo$i+1; ?>)</b> <?php echo$data['soal']; ?></h3>
						<h4>Jawab</h4>
						<input name="no[<?php echo$data['id']; ?>]" type="hidden" value="<?php echo$data['id']; ?>">
						<textarea cols="70" rows="5" name="jawaban[<?php echo$data['id']; ?>]" onchange="set(<?php echo$i; ?>,this.value)"></textarea>
					</div>
					<?php
					$i++;
					} 
					?>
				  </div>
				  
				  <ol class="carousel-indicators">
					<?php 
					$i = 0;
					foreach($soal as $data){
					?>
					<li data-target="#carousel-test-generic" data-slide-to="<?php echo$i; ?>" class="<?php if($i==0){echo"active";} ?>"></li>
					<?php
					$i++;
					} 
					?>
				  </ol>
				  
				  <a class="left carousel-control" href="#carousel-test-generic" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"></span>
				  </a>
				  <a class="right carousel-control" href="#carousel-test-generic" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right"></span>
				  </a>
			</div>
		</div>
		
		<div style="position:relative; top:-20px; padding-left:10px; padding-right:10px">
		<?php 
		$i = 0;
		foreach($soal as $data){
		?>
		<button type="button" class="btn btn-success <?php echo$i; ?>" id="tombol_<?php echo$i; ?>" data-target="#carousel-test-generic" data-slide-to="<?php echo$i; ?>" style="margin-bottom: 5px"><?php echo$i+1; ?></button>
		<?php
		$i++;
		} 
		?>
		</div>
	  
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" name="Selesai" data-dismiss="modal" onclick="selesai();">Selesai</button>
      </div>
    </form>
	</div>
  </div>
</div>

<script language="JavaScript">
	var waktu = '<?php echo$waktu_test_id; ?>';
	
	function mulai(){
		$("#mulai").hide();
		$("#lihat_soal").show();
		timer.start(1000);
		//waktu
		timer.reset(waktu);
	}
	
	function selesai(){
		timer.stop();
		var selesai = document.getElementById("hour").innerHTML+":"+document.getElementById("minute").innerHTML+":"+document.getElementById("second").innerHTML;
		$('span.waktu_selesai').html(selesai);
		$("#lihat_soal").hide();
		$("#mulai").hide();
		$('.bs-kerjakan-modal-lg').modal('hide');
	}
	
	function set(i,value){
		if(value!=''){
			document.getElementById("tombol_"+i).setAttribute("class", "btn btn-info");
		}else{
			document.getElementById("tombol_"+i).setAttribute("class", "btn btn-success");
		}
	}
</script>